<template>
  <div class="icon_arrows"></div>
</template>

<script>
export default {
  setup () {

  }
}
</script>

<style lang="scss" scoped>
.icon_arrows {
  position: absolute;
  top: 87.3%;
  left: 50%;
  margin-left: -0.31rem;
  width: 0.62rem;
  height: 0.58rem;
  background-image: url("./images/arrow/arrows.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: arrows 3s ease-in infinite;
  opacity: 0;
  @keyframes arrows {
    0% {
      opacity: 0.1;
    }
    50% {
      opacity: 0.8;
    }
    100% {
      opacity: 0.1;
    }
  }
}
// .icon_arrows--display-animation {
//   animation: arrowsDisplay 3s ease-in;
//   @keyframes arrowsDisplay {
//     0% {
//       opacity: 0;
//     }
//     100% {
//       opacity: 0.3;
//     }
//   }
// }
</style>
